<template>
	<div>
		<el-row :gutter="20">
			<el-col :lg="8" :xl="8" style="margin-bottom: 17px">
				<div class="button">
					<el-button type="primary" size="medium" icon="el-icon-arrow-down" @click="onClickUnfold">全部展开</el-button>
					<el-button type="primary" size="medium" icon="el-icon-arrow-up" @click="onClickFold">全部折叠</el-button>
				</div>
				<div class="padding10 tree" :style="{ height: leftTreeHeight + 'px' }">
					<el-input placeholder="输入关键字进行过滤" v-model="leftTreeFilterText" clearable style="margin-bottom: 10px"></el-input>
					<el-tree class="filter-tree" v-if="menuTable" :data="leftTreeData" :props="defaultProps" :default-expand-all="isFold" :filter-node-method="leftTreeFilterNode" highlight-current ref="tree" @node-click="chooseLeftTree"></el-tree>
				</div>
			</el-col>
			<el-col :lg="16" :xl="16">
				<div class="padding10">
					<el-form :inline="true" :model="queryForm" @submit.native.prevent @keyup.enter.native="queryList">
						<el-form-item>
							<fortress-select v-model="queryForm.coursewareType" :dictList="CoursewareTypeList" placeholder="请选择课件类型" clearable filterable></fortress-select>
						</el-form-item>
						<el-form-item>
							<el-input prefix-icon="el-icon-search" v-model="queryForm.coursewareName" autocomplete="off" placeholder="请输入课件名称" clearable></el-input>
						</el-form-item>

						<!-- <el-form-item v-show="collapse.flag">
							<el-select v-model="queryForm.isDownload" placeholder="请选择是否允许下载" clearable>
								<el-option label="启用" value="1"></el-option>
								<el-option label="禁用" value="2"></el-option>
							</el-select>
						</el-form-item> -->
						<el-form-item>
							<el-button type="primary" size="medium" icon="el-icon-search" @click="queryList({ current: 1 })">
								查询
							</el-button>
						</el-form-item>
						<el-form-item>
							<el-button type="primary" size="medium" icon="el-icon-refresh-left" @click="resetQueryForm">重置</el-button>
						</el-form-item>
						<!--						<el-form-item>-->
						<!--							<el-button type="text" @click="handleCollapseState">-->
						<!--								{{ collapse.label }}-->
						<!--								<i :class="collapse.icon"></i>-->
						<!--							</el-button>-->
						<!--						</el-form-item>-->
					</el-form>
					<el-button style="margin: 10px 0 17px" type="primary" size="medium" icon="el-icon-plus" v-if="$tools.hasPermission('study:course:studyCourseware:save')" @click="handleEdit()">
						添加
					</el-button>
					<el-button v-if="$tools.hasPermission('study:course:studyCourseware:deleteBatch')" size="medium" type="danger" icon="el-icon-delete" @click="handleDeleteBatch()">
						删除
					</el-button>
					<div style="float: right; padding-right: 17px">
						<!--						<i class="el-icon-download" style="margin-right: 10px; cursor: pointer" @click="handleExport"></i>-->
						<i class="el-icon-refresh" style="margin-right: 10px; cursor: pointer" @click="refresh"></i>

						<el-popover placement="bottom" width="180" trigger="click" title="列展示" popper-class="columnShows">
							<el-checkbox-group v-model="tableShowList">
								<el-checkbox v-for="item in tableList" :label="item.propName" :key="item.propName" :value="item.propName">
									{{ item.propDesc }}
								</el-checkbox>
							</el-checkbox-group>
							<i slot="reference" class="el-icon-s-operation" style="cursor: pointer"></i>
						</el-popover>
					</div>
					<!-- loading -->
					<loading :show="parentShow">
						<el-table ref="multipleTable" :data="tableData" style="width: 100%; margin-bottom: 20px" row-key="id" border>
							<el-table-column type="selection" width="55" show-overflow-tooltip></el-table-column>

							<el-table-column v-if="$tools.isShow('coursewareType', tableShowList)" prop="coursewareType" label="课件类型" width="90px" :show-overflow-tooltip="true" :formatter="coursewareTypeFmt"></el-table-column>
							<el-table-column v-if="$tools.isShow('coursewareName', tableShowList)" prop="coursewareName" label="课件名称" width="260px" :show-overflow-tooltip="true"></el-table-column>
							<el-table-column v-if="$tools.isShow('sort', tableShowList)" prop="sort" label="排序" width="80px" :show-overflow-tooltip="true"></el-table-column>
							<el-table-column prop="needConver" label="状态" :show-overflow-tooltip="true">
								<template #default="{row}">
									{{ ["已转化", "需要转化", "转化中"][row.needConver] || "" }}
								</template>
							</el-table-column>
							<el-table-column label="操作" fixed="right" min-width="180">
								<template slot-scope="scope">
									<el-button v-if="$tools.hasPermission('study:course:studyCourseware:info') && scope.row.needConver == 0" size="mini" plain @click="handleInfo(scope.row.id)">
										详情
									</el-button>
									<el-button v-if="$tools.hasPermission('study:course:studyCourseware:edit') && scope.row.needConver == 0" size="mini" plain @click="handleEdit(scope.row)">
										编辑
									</el-button>
									<el-button v-if="$tools.hasPermission('study:course:studyCourseware:delete') && scope.row.needConver == 0" size="mini" plain type="danger" @click="handleDelete(scope.row)">
										删除
									</el-button>
								</template>
							</el-table-column>
						</el-table>
					</loading>
					<pagination :total="page.total" :current-page="page.current" :page-size="page.size" @refreshData="queryList"></pagination>
					<!-- 新增、编辑 -->
					<form-edit v-if="formEditVisible" ref="formEdit" :leftTreeData="leftTreesimple" @refreshData="queryList"></form-edit>
					<!-- 详情 -->
				</div>
			</el-col>
		</el-row>
		<form-info v-if="formInfoVisible" ref="formInfo"></form-info>
	</div>
</template>
<script>
import { studycoursewarePage, studycoursewareDel, studycoursewareDelBatch, studycoursewareDynamicExport, leftTreeList } from "@/api/study/course/studycourseware.js"
import { viewTableList } from "@/api/public.api.js"
import FormEdit from "./studycourseware-edit"
import FormInfo from "./studycourseware-info"
import FortressPagination from "@/components/fortress-pagination.vue"
import { enumList, urlList } from "@/api/public.api.js"
export default {
	data() {
		return {
			leftTreeHeight: 0,
			leftTreeFilterText: "",
			parentShow: false,
			tableData: [],
			leftTreeData: [],
			leftTreesimple: [],
			defaultProps: {
				children: "children",
				label: "name",
			},
			sleLeftTreeId: "",
			sleLeftTreeName: "",
			formEditVisible: false,
			formInfoVisible: false,
			queryForm: {
				coursewareType: "",
				coursewareName: "",
				isDownload: "",
			},
			page: {
				current: 1,
				size: 10,
				total: 0,
			},
			collapse: {
				icon: "el-icon-arrow-down el-icon--right",
				label: "展开",
				flag: false,
			},
			tableList: [],
			tableShowList: [],
			CoursewareTypeList: [],
			YesNoList: [],
			classifyIdList: [],
			isFold: true,
			menuTable: true,
		}
	},
	components: {
		"form-edit": FormEdit,
		"form-info": FormInfo,
		pagination: FortressPagination,
	},
	created() {
		this.leftTreeHeight = window.innerHeight * 0.8
		this.queryEnumList()
		this.queryUrlList()
		this.queryLeftTreeList()
		this.initTableList()
		this.queryList()
	},
	watch: {
		leftTreeFilterText(val) {
			this.$refs.tree.filter(val)
		},
		isFold() {
			this.menuTable = false
			this.$nextTick(() => {
				this.menuTable = true
			})
		},
	},
	methods: {
		onFileUploadSuccess() {},
		queryEnumList() {
			this.CoursewareTypeList = []
			enumList("CoursewareType", "").then(resp => {
				if (resp.code == 0) {
					this.CoursewareTypeList = resp.data
				}
			})
			this.YesNoList = []
			enumList("YesNo", "").then(resp => {
				if (resp.code == 0) {
					this.YesNoList = resp.data
				}
			})
		},
		queryUrlList() {
			this.classifyIdList = []
			urlList("/study/course/studyCourseClassify/list").then(resp => {
				if (resp.code == 0) {
					if (resp.data) {
						resp.data.forEach(item => {
							this.classifyIdList.push({ code: item.id, name: item.name })
						})
					}
				}
			})
		},
		//查询左树数据
		queryLeftTreeList() {
			const leftTreeData = [{ id: -1, name: "全部", children: [] }]
			leftTreeList().then(resp => {
				if (resp.code == 0) {
					this.leftTreesimple = resp.data
					leftTreeData[0].children = this.leftTreesimple
					this.leftTreeData = leftTreeData
				} else {
					this.$msg({
						message: resp.msg,
						type: "error",
					})
				}
			})
		},
		leftTreeFilterNode(value, data) {
			if (!value) return true
			return data.name.indexOf(value) !== -1
		},
		//点选左侧树
		chooseLeftTree(data, node) {
			if (data.id == -1) {
				this.sleLeftTreeId = ""
				this.sleLeftTreeName = ""
				this.queryRightTable("")
			} else {
				this.sleLeftTreeId = data.id
				this.sleLeftTreeName = data.name
				this.queryRightTable(data.id)
			}
		},
		//点击左树筛选右侧表格数据
		queryRightTable(sleLeftTreeId) {
			this.queryForm.classifyId = sleLeftTreeId
			this.queryList()
		},
		refresh() {
			this.tableData = []
			this.queryList({ current: 1 })
		},
		//查询表格数据
		queryList(page) {
			this.parentShow = true
			if (page) {
				this.page.current = page.current ? page.current : this.page.current
				this.page.size = page.size ? page.size : this.page.size
			}
			this.queryForm.current = this.page.current
			this.queryForm.size = this.page.size
			studycoursewarePage(this.queryForm).then(resp => {
				if (resp.code == 0) {
					this.tableData = resp.data.records
					this.page.total = resp.data.total
					//查询页大于总页数，重新查询
					let cu = this.page.total % this.page.size == 0 ? parseInt(this.page.total / this.page.size) : parseInt(this.page.total / this.page.size + 1)
					if (cu > 0 && this.page.current > cu) {
						this.queryList({ current: cu })
					}
				} else {
					this.$msg({
						message: resp.msg,
						type: "error",
					})
				}
				this.parentShow = false
			})
		},
		//打开编辑窗口
		handleEdit(row) {
			//新增
			if (!row) {
				if (!this.sleLeftTreeId) {
					this.$msg({
						message: "请选择左侧架构",
						type: "error",
					})
					return
				}
			}
			this.formEditVisible = true
			this.$nextTick(() => {
				if (row) {
					this.$refs.formEdit.init(row.id)
				} else {
					this.$refs.formEdit.init(undefined, this.sleLeftTreeId, this.sleLeftTreeName)
				}
			})
		},
		//打开详情窗口
		handleInfo(id) {
			this.formInfoVisible = true
			this.$nextTick(() => {
				this.$refs.formInfo.init(id)
			})
		},
		//删除
		handleDelete(row) {
			this.$confirm("确认删除该记录, 是否继续?", "提示", {
				confirmButtonText: "确定",
				cancelButtonText: "取消",
				type: "warning",
			})
				.then(() => {
					studycoursewareDel(row.id).then(resp => {
						if (resp.code == 0) {
							this.$message({
								type: "success",
								message: "操作成功!",
							})
							//判断是否最后一页的最后一条记录
							let totalPages = (this.page.total - 1) % this.page.size == 0 ? (this.page.total - 1) / this.page.size : (this.page.total - 1) / this.page.size + 1
							if (this.page.current > totalPages && this.page.current != 1) {
								this.page.current = this.page.current - 1
							}
							this.queryList()
						} else {
							this.$msg({
								message: resp.msg,
								type: "error",
							})
						}
					})
				})
				.catch(() => {})
		},
		//批量删除
		handleDeleteBatch() {
			let checkedRow = this.$refs.multipleTable.selection
			if (checkedRow.length > 0) {
				let ids = []
				checkedRow.forEach(item => {
					ids.push(item.id)
				})
				this.$confirm("确认删除该记录, 是否继续?", "提示", {
					confirmButtonText: "确定",
					cancelButtonText: "取消",
					type: "warning",
				})
					.then(() => {
						studycoursewareDelBatch(ids).then(resp => {
							if (resp.code == 0) {
								this.$message({
									type: "success",
									message: "操作成功!",
								})
								//判断是否最后一页的最后一条记录
								let totalPages = (this.page.total - checkedRow.length) % this.page.size == 0 ? (this.page.total - checkedRow.length) / this.page.size : (this.page.total - checkedRow.length) / this.page.size + 1
								if (this.page.current > totalPages && this.page.current != 1) {
									this.page.current = this.page.current - 1
								}
								this.queryList()
							} else {
								this.$msg({
									message: resp.msg,
									type: "error",
								})
							}
						})
					})
					.catch(() => {})
			} else {
				this.$msg({
					message: "请选择数据进行删除",
					type: "error",
				})
			}
		},
		//重置查询框
		resetQueryForm() {
			this.queryForm = {
				coursewareType: "",
				coursewareName: "",
				isDownload: "",
				classifyId: this.sleLeftTreeId,
			}
			this.queryList({ current: 1 })
		},
		//切换查询条件收缩框
		handleCollapseState() {
			this.collapse.flag = !this.collapse.flag
			if (this.collapse.flag) {
				this.collapse.icon = "el-icon-arrow-up el-icon--right"
				this.collapse.label = "收起"
			} else {
				this.collapse.icon = "el-icon-arrow-down el-icon--right"
				this.collapse.label = "展开"
			}
		},
		//视图表格列表初始化
		initTableList() {
			viewTableList("study_courseware").then(resp => {
				if (resp.code == 0) {
					this.tableList = resp.data
					this.tableList.forEach(item => {
						this.tableShowList.push(item.propName)
					})
				}
			})
		},
		//课件类型格式化返回
		coursewareTypeFmt(row) {
			let name = ""
			if (this.CoursewareTypeList) {
				this.CoursewareTypeList.forEach(item => {
					if (item.code == row.coursewareType) {
						name = item.name
					}
				})
			}
			return name
		},
		isDownloadFmt(row) {
			let name = "禁用"
			if (row.isDownload == 1) {
				name = "启用"
			}
			return name
		},
		//可见字段excel导出
		handleExport() {
			if (!this.tableShowList || this.tableShowList.length < 1) {
				this.$msg({
					message: "请选择要导出的列",
					type: "error",
				})
				return
			}
			let colNum = 1
			let headerList = []
			this.tableShowList.forEach(item => {
				let nameData = this.tableList.find(item2 => {
					return item2.propName == item
				})
				let name = ""
				if (nameData && nameData.propDesc) {
					name = nameData.propDesc
				} else {
					name = "未定义字段" + colNum++
				}
				headerList.push({ name: name, code: item })
			})
			studycoursewareDynamicExport({ headerList: headerList, dto: this.queryForm })
		},
		onClickUnfold() {
			this.isFold = true
		},
		onClickFold() {
			this.isFold = false
		},
	},
}
</script>
<style scoped>
.button {
	background-color: #fff;
}
.padding10 {
	padding: 10px 20px;
	background-color: #fff;
	/* max-height: 600px; */
	overflow: auto;
	border-radius: 4px;
	box-shadow: 0 1px 2px 0 rgb(0 0 0 / 5%);
}
.tree {
	height: 600px;
	overflow: auto;
}
</style>
